<template>
  <div class="main">
    <div>
      <img :src="Free" alt>
    </div>
    <div class="footer">
      <button type="button" class="foot-btn" @click="handleClick">邀请好友</button>
    </div>
    <Share v-if="showShare" @share="handleShare" @close="handleClose"/>
  </div>
</template>

<script>
import Free from "../../assets/water/free.png";
import Share from "@/components/common/Share";
export default {
  components: {
    Share
  },
  data() {
    return {
      Free,
      showShare: false
    };
  },
  methods: {
    handleClick() {
      this.showShare = true;
    },
    handleClose() {
      this.showShare = false;
    },
    handleShare() {

    }
  }
};
</script>

<style lang="less" scoped>
.main {
  margin-bottom: 10vw;
  img {
    max-width: 100%;
  }
  .footer {
    position: fixed;
    width: 100vw;
    bottom: 0;
  }
  .foot-btn {
    width: 100%;
    border: 0;
    outline: none;
    position: fixed;
    bottom: 0;
    background: #008fef;
    color: #fff;
    font-size: 4vw;
    padding: 3vw 0;
  }
}
</style>